<template>
	<view class="issue">
		<view class="album" v-if="xiangce">
			<view class="issue-top">
				<view class="issue-top-left">
					<text class="issue-top-left-text" @click="hui">X</text>
				</view>
				<view class="issue-top-conten">
					<text>全部</text>
				</view>
			</view>
			<view class="issue-tabs">
				<u-tabs :list="list1" @click="click" lineColor="#f72647" lineWidth="45rpx" lineHeight="10rpx"
					:activStyle="{
				color:'white'
			}" :inactiveStyle="{
				color:'#b6b6b6'
			}">
				</u-tabs>
			</view>
			<!-- 相册 -->
			<view class="all" v-if="allShow">
				<image class="tup" src="http://172.16.103.12:8080/f47c55b1-3389-4f18-823e-9ef2cd1ef913" mode="aspectFit" v-for="(item,index) in tempFilePaths" :key="index"></image>
			</view>
			<view class="video all" v-if="videoShow">
				
			</view>
			<view class="photograph all " v-if="photographShow">
				
			</view>
			<view class="tepmp all" v-if="tepmeShow">

			</view>
		</view>
		<!-- 文字 -->
		<view class="scripts" v-if="wenben">
			<view class="yan"></view>
			<view class="script-top">
				<view class="issue-top-left">
					<text class="issue-top-left-text t" @click="hui" >X</text>
				</view>
				<view class="caogaoxiang">
					<text class="caogaoxiang-text">草稿箱</text>
				</view>
			</view>
			<view class="scripts-text" @click="publishArticle">
				<view class="scripts-text-1">“</view>
				<text class="scripts-text-2">发文字笔记讨论</text>
				<text class="scripts-text-3">用一句话迎接夏日！</text>
			</view>
		</view>
		<!-- 拍摄 -->
		<view class="shoot-film" v-if="paishe">
			<view @tap="takePhoto" @touchstart="startRecord" @touchend="stopRecord" class="shoot"></view>
			<image v-if="mediaType === 'photo' && mediaUrl" :src="mediaUrl" mode="aspectFit"
				style="width: 100%; height: 1000rpx;"></image>
			<video v-else-if="mediaType === 'video' && mediaUrl" :src="mediaUrl" controls
				style="width: 100%; height: 1000rpx;"></video>
		</view>




		<view class="bottom">
			<view class="" @click="Text">
				文字
			</view>
			<view class="" @click="images">
				相册
			</view>
			<view class="" @click="shoot">
				拍摄
			</view>
			<view class="" @click="streaming">
				直播
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success:(res)=> {
					this.tempFilePaths=res.tempFilePaths
					this.chuli();
					console.log(this.tempFilePaths);
				}
			});

		},
		data() {
			return {
				allShow: true,
				videoShow: false,
				photographShow: false,
				tepmeShow: false,
				xiangce: true,
				wenben: false,
				paishe: false,
				list1: [{
					name: '全部',
				}, {
					name: '视频',
				}, {
					name: '照片'
				}, {
					name: '实况图'
				}],
				mediaType: 'photo', // 初始为拍照模式
				mediaUrl: '', // 存储拍摄或录制后的媒体文件地址
				tempFilePaths:[]
			}
		},
		
		methods: {
			chuli(){
				for (var i = 0; i < this.tempFilePaths.length; i++) {
					this.tempFilePaths[i]=this.tempFilePaths[i].slice(5,this.tempFilePaths[i].length)
				}
			},
			click(e) {
				if (e.index == 0) {
					this.allShow = true;
					this.videoShow = false;
					this.photographShow = false;
					this.tepmeShow = false;
				} else if (e.index == 1) {
					this.allShow = false;
					this.videoShow = true;
					this.photographShow = false;
					this.tepmeShow = false;
				} else if (e.index == 2) {
					this.allShow = false;
					this.videoShow = false;
					this.photographShow = true;
					this.tepmeShow = false;
				} else if (e.index == 3) {
					this.allShow = false;
					this.videoShow = false;
					this.photographShow = false;
					this.tepmeShow = true;
				}
			},
			publishArticle() {
				uni.navigateTo({
					url: "/pages/issue/issueText/issueText"
				})
			},
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						this.mediaUrl = res.tempFilePaths[0];
						this.mediaType = 'photo';
					},
					fail: (err) => {
						console.error('拍照失败', err);
					}
				});
			},
			startRecord() {
				this.longPressTimer = setTimeout(() => {
					uni.showToast({
						title: '开始录制',
						icon: 'none'
					});
					uni.chooseVideo({
						sourceType: ['camera'],
						maxDuration: 60, // 最长录制时间，单位秒
						camera: 'back', // 使用后置摄像头
						success: (res) => {
							this.mediaUrl = res.tempFilePath;
							this.mediaType = 'video';
						},
						fail: (err) => {
							console.error('录像失败', err);
						}
					});
				}, 1000); // 设置长按触发时间阈值，单位毫秒
			},
			stopRecord() {
				clearTimeout(this.longPressTimer);
				uni.showToast({
					title: '录制已取消',
					icon: 'none'
				});
			},
			Text() {
				this.xiangce = false;
				this.wenben = true;
				this.paishe = false;
			},
			images() {
				this.xiangce = true;
				this.wenben = false;
				this.paishe = false;
			},
			shoot() {
				this.xiangce = false;
				this.wenben = false;
				this.paishe = true;
			},
			hui(){
				uni.navigateBack({
					delta:1
				})
			},
			streaming(){
				this.xiangce = false;
				this.wenben = false;
				this.paishe = false;
			}
			
		}
	}
</script>

<style scoped>
	.issue {}

	.caogaoxiang {
		width: 30%;
		font-size: 35rpx;
	}

	.scripts-text {
		margin-top: 380rpx;
		display: flex;
		flex-direction: column;
	}

	.scripts-text-3 {
		margin-left: 40rpx;
		font-size: 50rpx;
		color: #a8694d;
	}

	.scripts-text-2 {
		color: #fff;
		font-size: 80rpx;
		margin-left: 40rpx;
		margin-bottom: 40rpx;
	}

	.scripts-text-1 {
		width: 300rpx;
		height: 300rpx;
		font-size: 300rpx;
		color: #feb47b;
		font-weight: 900;

	}

	.caogaoxiang-text::before {
		font-family: "iconfont" !important;
		content: "\e717";
	}

	.t {
		color: #000;
		padding-left: 30rpx;
	}

	.scripts {
		height: 1600rpx;
	}

	.bottom {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-evenly;
		color: white;
		position: fixed;
		bottom: 0;
		background-color: black;
		line-height: 90rpx;
	}

	.album {
		background-color: black;
	}

	.issue-top {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.issue-top-left {
		width: 30%;
		color: white;
	}

	.issue-top-conten {
		width: 51%;
		color: white;
	}

	.issue-top-left-text {
		font-size: 60rpx;
		font-weight: 900;
		text-align: left;

	}

	.issue-tabs {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.script-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(255, 255, 255, 0);
	}

	.yan {
		background: linear-gradient(to right, #ff7e5f, #feb47b);
		filter: blur(150rpx);
		width: 1300rpx;
		height: 1300rpx;
		border-radius: 50%;
		position: absolute;
		left: -66rpx;
		top: -152rpx;
		z-index: -1;
	}

	.shoot {
		width: 200rpx;
		height: 200rpx;
		background-color: rgba(181, 181, 181, 0.5);
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 300rpx;
	}
	.all{
		width: 100%;
		height: 1600rpx;
	}
	.tup{
		width: 300rpx;
		height: 300rpx;
	}
</style>